<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name='gwt:module' content='es.entel.youroute'>
    <title>Ejemplo 1 Google Maps</title>
    <style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
    </style>
    <!--script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script-->
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAZzzanLfIMCgiNoDz-8vmrhSXFaPPoQ_T4aMpQv9JSOTBkA1l6RR62kaejbktU1Ctzxh0SjEG48w2JA" type="text/javascript"></script>
 <script type="text/javascript">
    //<![CDATA[
    var map;
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 15);
	map.addControl(new GScaleControl());
	map.addControl(new GMapTypeControl());
	map.addControl(new GLargeMapControl());
	map.addControl(new GOverviewMapControl());

	GEvent.addListener(map, "click", function(marker, point) {
		addPunto(point);
	});

      }
    }


var geocoder = new GClientGeocoder();

function showAddress(address, mark) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.panTo(point);
		if (mark){
	      		var marker = new GMarker(point);
              		map.addOverlay(marker);
              		marker.openInfoWindowHtml(address);
		}
            }
          }
        );
      }
}

function muestraDireccion(){
	showAddress((document.getElementById("txtDir")).value, (document.getElementById("chkMarca")).checked);
}

var puntoAnt;

function addPunto(punto){
	if (puntoAnt){
		var puntos=[puntoAnt, punto];
		dibujaLinea(puntos);
	}
	puntoAnt=punto;
}

function dibujaLinea(puntos){
	var polyline = new GPolyline(puntos, "#FF0000", 10);
	map.addOverlay(polyline);
}

function dibujaLineaPrueba(){
	var polyline = new GPolyline([
    		new GLatLng(37.4419, -122.1419),
    		new GLatLng(37.4519, -122.1519),
    		new GLatLng( 37.4619, -122.1819)
		], "#FF0000", 10);
	map.addOverlay(polyline);
}
    //]]>
    
    </script>
  </head>


  <body onload="load()" onunload="GUnload()">
  	<script language="javascript" src="gwt.js"></script>

	<!-- OPTIONAL: include this if you want history support -->
	<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
    <table border=1>
	<tr>
		<td width="25%">
			<input type="text" name="txtDir" id="txtDir"></input>
			<input type="checkbox" id="chkMarca" />
			<input type="button" value="Go!" onclick="muestraDireccion()" /><br /><br /><input type="button" value="Linea" onclick="dibujaLineaPrueba()" />
		</td>
    		<td width="75%" rowspan="2">
			<div id="map" style="width: 1000px; height: 550px; border: 2px solid black;"></div>
		</td>
	</tr>
	<tr>
		<td id="listaPuntos">
		</td>
	</tr>
    </table>
  </body>
</html>